<template>
  <div class="published-thing-operationsbar">
    <span class="opgroup opcomment" @click.stop="emit('reply-clicked')">
      <CommentOutlined></CommentOutlined>
      <span :style="{opacity: replyCount==0 ? 0 : 1}">{{replyCount}}</span>
    </span>

    <span class="opgroup opshare">
      <ShareAltOutlined @click.stop>="()=>{}"></ShareAltOutlined>
    </span>

    <span class="opgroup oplike">
      <HeartOutlined v-if="!doseILikedIt" @click.stop="emit('like-clicked')"></HeartOutlined>
      <HeartFilled class="heart-filled" v-if="doseILikedIt" @click.stop="emit('unlike-clicked')"></HeartFilled>
      <span :style="{opacity: likeCount==0 ? 0 : 1}">{{likeCount}}</span>
    </span>
  </div>
</template>

<script setup lang="ts">
import { CommentOutlined, HeartOutlined, HeartFilled, ShareAltOutlined } from '@ant-design/icons-vue';

const emit = defineEmits(['reply-clicked', 'like-clicked', 'unlike-clicked'])
defineProps({
  replyCount: {
    type: Number,
    default: 0
  },
  likeCount: {
    type: Number,
    default: 0
  },
  doseILikedIt: {
    type: Boolean,
    default: false
  }
});
</script>

<style scoped>
.published-thing-operationsbar {  
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-right: 40px;
  margin-bottom: 10px;
}
.published-thing-operationsbar > .opgroup {
  color: #666;
  line-height: 1em;
  cursor: pointer;
}

.published-thing-operationsbar > .opgroup > span {
  margin-left: 10px;
}
.heart-filled {
  color: #f91880;
}

</style>